import { AfterViewInit, Directive, ElementRef, HostListener, Input } from '@angular/core';

interface IHoverInput {
  enterBgColor?: string
  leaveBgColor?: string
}

@Directive({
  selector: '[appHover]'
})
export class HoverDirective implements AfterViewInit {
  @Input('appHover') options: IHoverInput = {}
  element: HTMLElement

  constructor(private elementRef: ElementRef) {
    this.element = this.elementRef?.nativeElement
  }
  
  ngAfterViewInit() {
    console.log('222222')
    console.log(this.elementRef?.nativeElement)
    this.element.style.backgroundColor = this.options?.leaveBgColor || 'white'
  }

  @HostListener('mouseenter')
  enter() {
    this.element.style.backgroundColor = this.options?.enterBgColor || 'white'
  }

  @HostListener('mouseleave') 
  leave() {
    this.element.style.backgroundColor = this.options?.leaveBgColor || 'white'
  }
}
